<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>商品详情页面</title>
  <!-- 引入重置样式表 normalize.css -->
  <link rel="stylesheet" href="/libs/css/normalize.css">
  <!-- 字体图标 -->
  <link rel="stylesheet" href="/libs/css/font/iconfont.css">
  <!-- 引入公共样式 -->
  <link rel="stylesheet" href="/css/includes/common.css">
  <link rel="stylesheet" href="/css/detail.css">
</head>

<body>
  <header>
    <div id="top">
      <div class="container">
        <div class="text">
          <p><a href="/index.html"><span class="iconfont icon-shouyeshouye"></span>熊猫优选</a></p>
          <p>嘿，欢迎来到熊猫优选</p>
          <p><a href="/html/login.html">请登录</a></p>
          <p><a href="/html/register.html">免费注册</a></p>
        </div>
      </div>
    </div>
    <!-- 导航 -->
    <div id="nav">
      <div class="container">
        <!-- logo -->
        <div class="logo">
          <a href="/index.html"><img src="/img/logo.png" alt=""></a>
          <div>
            <h3>熊猫优选</h3>
            <span>XIONG MAO YOU XUAN</span>
          </div>
        </div>
        <!-- search -->
        <div class="search">
          <img src="/img/head_searc.png" alt="">
          <input type="text" name="search" placeholder="搜索商品，发现更多优惠">
          <button>搜索</button>
        </div>
        <!-- cart -->
        <div class="cart" onclick="jumpCart()">
          <span class="iconfont icon-gouwuche"></span>
          <span>我的购物车</span>
        </div>
      </div>
    </div>
  </header>
  <!-- 菜单部分 -->
  <div id="menu">
    <div class="container">
      <ul>
        <li><a href="/index.html">首页</a></li>
        <li class="active"><a href="/html/parcelPost.html">商品详情</a></li>
      </ul>
    </div>
  </div>
  <!-- 商品 -->
  <div id="product">
    <div class="container">
      <!-- 商品图片 -->
      <div class="productImg">
        <div class="left">
          <!-- 大图 -->
          <ul class="big-img">
            <!-- 动态渲染 -->
          </ul>
          <!-- 小图 -->
          <ol class="small-img">
          </ol>
        </div>
        <div class="right">

        </div>
      </div>
      <!-- 商品信息 -->
      <div class="productText">
        <!-- 动态渲染 -->

      </div>
      <!-- 商品推荐 -->
      <div class="productAdvert">
        <fieldset>
          <legend>看了又看</legend>
          <div class="product-list">
            <!-- 动态渲染 -->
          </div>
          <div class="more">
            <span class="iconfont icon-jiantouxia"></span>
          </div>
        </fieldset>
      </div>
    </div>
  </div>
  <!-- 商品详情 -->
  <div id="product-details">
    <div class="container">
      <p><span>商品详情</span></p>
      <div class="details">
        <!-- 动态渲染 -->
      </div>
    </div>
  </div>
  <!-- 版权部分 -->
  <div id="foot">
    <div class="container">
      <div class="top">
        <div class="left">
          <img src="/img/logo.png" alt="">
          <span>
            <h1>熊猫优选</h1>
            <p>年轻人网购首选<br>购物领券更省钱</p>
          </span>
        </div>
        <p>| <a href="#">下载APP</a></p>
      </div>
      <div class="buttom">
        浙公安网备案 33010602009949号 | ICP备案号: 浙ICP备17012864号-1 | 证照信息
      </div>
    </div>
  </div>

 <script src="/libs/jquery/jquery.min.js"></script>
  <script src="/js/detail.js"></script>
</body>

</html>